<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧文旅 - 旅游路线助手</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=73932d45f3704e0d4a780df26b5ac63c"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background-color: #1e88e5;
            color: white;
            padding: 15px 20px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .main-container {
            display: flex;
            flex: 1;
            height: calc(100vh - 60px);
        }
        
        .map-container {
            flex: 3;
            position: relative;
            height: 100%;
            border-right: 1px solid #ddd;
        }
        
        #map {
            width: 100%;
            height: 100%;
        }
        
        .chat-container {
            flex: 2;
            display: flex;
            flex-direction: column;
            height: 100%;
            background-color: white;
        }
        
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }
        
        .message {
            margin-bottom: 15px;
            max-width: 80%;
            padding: 10px 15px;
            border-radius: 18px;
            position: relative;
            clear: both;
        }
        
        .user-message {
            background-color: #e3f2fd;
            color: #333;
            float: right;
            border-bottom-right-radius: 5px;
        }
        
        .ai-message {
            background-color: #f1f1f1;
            color: #333;
            float: left;
            border-bottom-left-radius: 5px;
        }
        
        .chat-input {
            display: flex;
            padding: 15px;
            border-top: 1px solid #ddd;
            background-color: white;
        }
        
        #message-input {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 25px;
            outline: none;
            font-size: 16px;
        }
        
        #send-button {
            margin-left: 10px;
            padding: 0 20px;
            background-color: #1e88e5;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        
        #send-button:hover {
            background-color: #1976d2;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 10px;
            color: #666;
        }
        
        .loading:after {
            content: '.';
            animation: dots 1.5s steps(5, end) infinite;
        }
        
        @keyframes dots {
            0%, 20% {
                color: rgba(0,0,0,0);
                text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
            }
            40% {
                color: #666;
                text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
            }
            60% {
                text-shadow: .25em 0 0 #666, .5em 0 0 rgba(0,0,0,0);
            }
            80%, 100% {
                text-shadow: .25em 0 0 #666, .5em 0 0 #666;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>智慧文旅 - AI旅游路线助手</h1>
    </div>
    
    <div class="main-container">
        <div class="map-container">
            <div id="map"></div>
        </div>
        
        <div class="chat-container">
            <div class="chat-messages" id="chat-messages">
                <div class="message ai-message">
                    您好！我是您的AI旅游助手。请告诉我您想去哪里旅游，我可以为您规划路线。
                </div>
            </div>
            
            <div class="loading" id="loading">AI正在思考中</div>
            
            <div class="chat-input">
                <input type="text" id="message-input" placeholder="请输入您的旅游需求..." />
                <button id="send-button">发送</button>
            </div>
        </div>
    </div>
    
    <script>
        // 初始化地图
        let map = new AMap.Map('map', {
            zoom: 11,
            center: [116.397428, 39.90923] // 默认北京中心坐标
        });
        
        // 添加地图控件
        map.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
            map.addControl(new AMap.ToolBar());
            map.addControl(new AMap.Scale());
        });
        
        // 聊天功能
        const chatMessages = document.getElementById('chat-messages');
        const messageInput = document.getElementById('message-input');
        const sendButton = document.getElementById('send-button');
        const loadingIndicator = document.getElementById('loading');
        
        // 模拟AI响应
        function simulateAIResponse(userMessage) {
            loadingIndicator.style.display = 'block';
            
            // 这里应该是调用后端AI接口的地方
            // 为了演示，我们使用setTimeout模拟延迟响应
            setTimeout(() => {
                let aiResponse = "";
                
                // 简单的关键词匹配逻辑
                if (userMessage.includes('北京')) {
                    aiResponse = "北京是一个很好的旅游目的地！您可以游览长城、故宫、颐和园等著名景点。我已在地图上标记了这些地点。您想了解哪个景点的详细信息？";
                    // 在地图上标记北京景点
                    markBeijingAttractions();
                } else if (userMessage.includes('上海')) {
                    aiResponse = "上海是中国的国际大都市！您可以参观外滩、东方明珠、迪士尼乐园等地。我已在地图上标记了这些地点。您对哪个景点更感兴趣？";
                    // 在地图上标记上海景点
                    markShanghaiAttractions();
                } else {
                    aiResponse = "您想去的地方很有趣！请告诉我更具体的城市或景点，我可以为您提供更详细的路线规划。";
                }
                
                addMessage(aiResponse, 'ai');
                loadingIndicator.style.display = 'none';
                
                // 自动滚动到最新消息
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }, 1500);
        }
        
        // 在地图上标记北京景点
        function markBeijingAttractions() {
            // 清除之前的标记
            map.clearMap();
            
            // 设置地图中心为北京
            map.setCenter([116.397428, 39.90923]);
            
            // 添加景点标记
            const attractions = [
                { name: '故宫博物院', position: [116.397026, 39.918058] },
                { name: '八达岭长城', position: [116.016536, 40.356585] },
                { name: '颐和园', position: [116.2755, 39.999001] },
                { name: '天安门广场', position: [116.397827, 39.903943] },
                { name: '圆明园', position: [116.303501, 40.007338] }
            ];
            
            attractions.forEach(attraction => {
                const marker = new AMap.Marker({
                    position: attraction.position,
                    title: attraction.name
                });
                
                marker.setMap(map);
                
                // 添加信息窗体
                const infoWindow = new AMap.InfoWindow({
                    content: `<div style="padding:10px;">${attraction.name}</div>`,
                    offset: new AMap.Pixel(0, -30)
                });
                
                // 绑定鼠标点击事件
                marker.on('click', () => {
                    infoWindow.open(map, marker.getPosition());
                });
            });
        }
        
        // 在地图上标记上海景点
        function markShanghaiAttractions() {
            // 清除之前的标记
            map.clearMap();
            
            // 设置地图中心为上海
            map.setCenter([121.473667, 31.230525]);
            
            // 添加景点标记
            const attractions = [
                { name: '外滩', position: [121.490317, 31.236305] },
                { name: '东方明珠', position: [121.499705, 31.239702] },
                { name: '上海迪士尼乐园', position: [121.674272, 31.1426] },
                { name: '豫园', position: [121.492289, 31.227401] },
                { name: '南京路步行街', position: [121.473667, 31.234454] }
            ];
            
            attractions.forEach(attraction => {
                const marker = new AMap.Marker({
                    position: attraction.position,
                    title: attraction.name
                });
                
                marker.setMap(map);
                
                // 添加信息窗体
                const infoWindow = new AMap.InfoWindow({
                    content: `<div style="padding:10px;">${attraction.name}</div>`,
                    offset: new AMap.Pixel(0, -30)
                });
                
                // 绑定鼠标点击事件
                marker.on('click', () => {
                    infoWindow.open(map, marker.getPosition());
                });
            });
        }
        
        // 添加消息到聊天窗口
        function addMessage(text, sender) {
            const messageDiv = document.createElement('div');
            messageDiv.classList.add('message');
            messageDiv.classList.add(sender + '-message');
            messageDiv.textContent = text;
            chatMessages.appendChild(messageDiv);
        }
        
        // 发送消息
        function sendMessage() {
            const message = messageInput.value.trim();
            if (message) {
                addMessage(message, 'user');
                messageInput.value = '';
                
                // 自动滚动到最新消息
                chatMessages.scrollTop = chatMessages.scrollHeight;
                
                // 获取AI响应
                simulateAIResponse(message);
            }
        }
        
        // 绑定发送按钮点击事件
        sendButton.addEventListener('click', sendMessage);
        
        // 绑定输入框回车事件
        messageInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>